
<template>
  <div style="margin-top: 20px;margin-left: 10px">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/main/echarts' }"><b>首页</b></el-breadcrumb-item>
      <el-breadcrumb-item><b>信息统计管理</b></el-breadcrumb-item>
      <el-breadcrumb-item>航班类型统计</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="statistics" style="margin-top: 51px">
    <el-row :gutter="20">
      <el-col :span="10">
        <div ref="pieChart" class="chart"></div>
      </el-col>
      <el-col :span="10">
        <div ref="barChart" class="chart"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">

    </el-row>
  </div>

</template>

<script>
import * as echarts from 'echarts';
import {onMounted, reactive, ref} from "vue";
import request from "@/utils/request";



export default {
  data() {
    return {
      // 模拟的类型数据
      //将statisticsum的数据导入到类型数据中
      newsTypeData: []
    };
  },
  mounted() {
    this.fetchDate();
  },
  methods: {
    fetchDate(){
      // 从SessionStorage取出数据
      let userstr = sessionStorage.getItem('username')
      const token = JSON.parse(userstr).token

      //alert(token)
      request({
        url : '/statistics/statisticsflight/getstatisticsum',
        method : 'get',
        headers: {
          'token': token
        }
      }).then(res=>{
        if (200 == res.data.errorCode){
          //请求成功后将数据上传到图形
          //alert(res.data.data.domestic)
          this.newsTypeData = [
            { name: '国内', value: res.data.data.domestic  },
            { name: '国际', value: res.data.data.international },
            { name: '混合', value: res.data.data.mixed },
            { name: '地区', value: res.data.data.regional },
          ];
          // 初始化图表
          this.$nextTick(() => {
            this.initCharts();
          });
        }
      })

    },
    initCharts() {
      // 初始化饼状图
      let pieChart = echarts.init(this.$refs.pieChart);
      let pieOption = {
        title: {
          text: '航班类型比例',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: this.newsTypeData.map(item => item.name)
        },
        series: [
          {
            name: '航班类型',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.newsTypeData.map(item => {
              return {
                value: item.value,
                name: item.name
              };
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      pieChart.setOption(pieOption);

      // 初始化柱状图
      let barChart = echarts.init(this.$refs.barChart);
      let barOption = {
        title: {
          text: '航班类型统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: this.newsTypeData.map(item => item.name)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.newsTypeData.map(item => item.value),
          type: 'bar'
        }]
      };
      barChart.setOption(barOption);
    }
  }
};
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>
